.cards-titlebar {
  border: 1px solid $neutral-300;
  height: 24px;
}

.cards-dropdown {
  border: 1px solid $neutral-200;
  height: 24px;
  margin-bottom: 5px;
}

.show-hide-tests {
  height: 3.5vh;
  font-size: '18rem';
}

.show-hide-tests-icon {
  position: relative;
  left: 12.5vw;
}

.show-hide-event {
  height: 3.5vh;
  font-size: '16rem';
}

.show-hide-event-icon {
  position: relative;
  left: 12.5vw;
}

.grid-graph {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
}

.queue {
  font-weight: bold;
  font-size: 1.2rem;
}

.queue-clear {
  width: 30vw;
}

.pass-fail-total {
  font-weight: bold;
  font-size: 2rem;
  align-self: start;
  justify-self: start;
}

.rotate {
  animation: rotation 10s infinite linear;
  overflow: hidden;
}

.no-overflow {
  overflow: hidden;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.pass-fail-total-number {
  font-weight: normal;
}

.pass-fail-percentage {
  font-weight: bold;
  font-size: 1.2rem;
  align-self: start;
  justify-self: start;
}

.align-self-end {
  align-self: end;
}

.test-results {
  font-weight: 600;
  font-size: 1.4rem;
}

@mixin pass-fail-button {
  display: flex;
  padding: 0.3rem;
}

.pass-fail-response {
  @include pass-fail-button;
}

.pass-fail-button-success {
  @include pass-fail-button;
  background-color: $primary-300;
}

.pass-fail-button-failure {
  @include pass-fail-button;
  background-color: $primary-400;
}

.is-flex-basis-0 {
  flex-basis: 0;
}

.is-margin-top-auto {
  margin-top: 50px;
}

.minimize-card:hover {
  cursor: pointer;
}

.highlighted-response {
  border-radius: 5px;
  border: 3px solid lightgray;
}

.is-graph-footer {
  background-color: $neutral-100;
  color: $primary-500 !important;
  min-height: 3rem;
  height: 3rem;
  margin-top: auto;
}

.is-3rem-footer {
  margin-bottom: 0.5rem;
  margin-top: 0.3rem;
}

.is-no-top-margin-footer {
  margin-top: 0;
}

.connection-closedsocket {
  border: 2px solid $neutral-400;
  border-radius: 30px;
  height: 12px;
  width: 12px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.connection-error {
  border-radius: 30px;
  background-color: $primary-200;
  height: 12px;
  width: 12px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.connection-closed {
  border-radius: 30px;
  background-color: $primary-300;
  height: 12px;
  width: 12px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.connection-open {
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;

  /* you dont need the stuff below, but its what I used to create the loading circle */
  border: 2px solid $neutral-400;
  border-radius: 30px;
  height: 12px;
  width: 12px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.is-modal-workspaces {
  color: $neutral-500;
  background-color: $neutral-100 !important;
  width: 33% !important;
}

.is-primary-link {
  &:hover {
    color: $primary-500 !important;
  }
}

.border-top {
  border-top: 1px solid $neutral-300;
}

.border-curve {
  border-radius: 2px !important;
}

.no-styling {
  padding: 0;
  margin: 0;
}

.assertion-test-snippets {
  display: flex;
  flex-direction: column;
  margin: 0.5rem auto 0.5rem 0;
  gap: 0.5rem;

  header {
    text-decoration: underline;
  }

  span {
    display: inline-block;
    transition: transform 0.3s ease-out;

    &:hover {
      cursor: pointer;
      transform: translate(5px, 0);
    }
  }
}

// BARGRAPH

.bar-graph {
  transition: 1s ease-in-out;
}

.clear-chart-button {
  float: right;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #6d6969;
  float: none;
  width: 100%;
  overflow: auto;
  z-index: 1;
}

.dropdown-content a:hover {
  background-color: #8e1212;
}

.dropdown:hover .dropdown-content {
  display: flex;
  align-content: center;
  flex-direction: column;
}
